<template>
  <div class="pad-20" v-loading="fullLoading" element-loading-text="加载中">
    <el-row>
      <!-- 左侧信息 -->
      <el-col :span="12">
        <table class="base-info"> 
          <tr>
            <td class="left">发货单号：</td>
            <td class="right">
              <span>{{ sendObj.sendNo }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">发货单状态：</td>
            <td class="right">
              <span>{{ dict.sendStatus[sendObj.sendStatus] }}</span>
              <span>-</span>
              <span :class="sendObj.stopFlag == 1 ? 'font-red' : ''">{{ dict.stopFlag[sendObj.stopFlag] }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">关联订单号：</td>
            <td class="right">
              <span>{{ sendObj.projectOrder.orderNo }}</span>
              <span class="font-blue">（{{ dict.orderStatus[sendObj.projectOrder.orderStatus] }}）</span>
            </td>
          </tr>
        </table>
      </el-col>

      <!-- 右侧信息 -->
      <el-col :span="12">
        <table class="base-info">
          <tr>
            <td class="left">收货人姓名：</td>
            <td class="right">
              <span>{{ sendObj.projectOrder.customerNickname }}</span>
              <template v-if="sendObj.projectOrder.encryptReceiveFlag == 1">
                <el-tooltip class="item" effect="dark" content="点击查看收货信息" placement="top-start">
                  <img :src="isLock ? lockIcon : unlockIcon" class="width-24 cursor-p mar-l-20" @click="doDecrypt(0)">
                </el-tooltip>
              </template>
            </td>
          </tr>
          <tr>
            <td class="left">收货人电话：</td>
            <td class="right">
              <span>{{ sendObj.projectOrder.customerPhone }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">收货人地址：</td>
            <td class="right">
              <span>{{ sendObj.projectOrder.customerFullAddress }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">快递公司：</td>
            <td class="right">
              <span>{{ sendObj.expressName }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">运单号：</td>
            <td class="right">
              <span>{{ sendObj.trackingNo }}</span>
              <a href="javascript:;" v-if="sendObj.trackingNo" @click="doCopy(sendObj.trackingNo, $event)"><span class="mar-l-10 font-blue">复制</span></a>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>

    <!-- 商品信息 -->
    <div class="tabs-box mar-t-20">
      <el-tabs v-model="tabModel">
        <el-tab-pane label="商品明细" name="detail">
          <el-table :data="sendDetailList" height="400">
            <el-table-column min-width="260px" label="商品" prop="goodsTitle">
              <template slot-scope="scope">
                <div class="flex">
                  <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="t-goods-pic"></label>
                  <div class="pad-l-10">
                    <div class="line-2">{{ scope.row.goodsTitle }}</div>
                    <br>
                    <div v-if="scope.row.goodsBarCode">条码：{{ scope.row.goodsBarCode }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="180px" label="规格描述" prop="skuDetail" align="center">
              <template slot-scope="scope">
                <div class="font-blue">
                  {{ scope.row.skuDetail ? scope.row.skuDetail : '无' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="100px" label="数量" align="center">
              <template slot-scope="scope">
                <div>商品数：{{ scope.row.goodsNum }}</div>
                <div>发货数：{{ scope.row.deliveryNum }}</div>
              </template>
            </el-table-column>
            <el-table-column width="100px" label="单价" prop="goodsPrice" align="center">
              <template slot-scope="scope">
                <div>￥{{ scope.row.goodsPrice }}</div>
              </template>
            </el-table-column>
            <el-table-column width="120px" label="金额" prop="goodsAmount" align="center">
              <template slot-scope="scope">
                <div>￥{{ scope.row.goodsAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column width="140px" label="截停信息" align="center">
              <template slot-scope="scope">
                <div class="font-red" v-if="scope.row.stopRemark">
                  <span>{{ scope.row.stopRemark }}</span>
                  <span>（截停数量：{{ scope.row.stopNum }}）</span>
                </div>
                <div v-else>无</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="包裹单列表" name="package" v-if="packageList.length > 0">
          <el-table :data="packageList" height="400">
            <el-table-column min-width="260px" label="包裹单号" prop="packageNo">
            </el-table-column>
            <el-table-column min-width="140px" label="创建时间" prop="createTime">
            </el-table-column>
            <el-table-column min-width="100px" label="数量" prop="goodsNum" align="center">
            </el-table-column>
            <el-table-column min-width="180px" label="物流信息" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.EnterpriseExpressName }}</div>
                <div>运单号：{{ scope.row.trackingNo }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

      </el-tabs>
    </div>

  </div>
</template>

<script>
  import { getSendDetail } from '@/api/order/projectSend'
  import { getDictByGroupName } from '@/api/common/common'
  import { decryptReceiveInfo } from '@/api/goods/thirdOrder'
  import clipboard from '@/utils/clipboard'
  import unlockIcon from '@/assets/images/unlock-icon.png'
  import lockIcon from '@/assets/images/lock-icon.png'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 发货单id
      sendId: {
        type: String
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          const originData = this.$options.data()
          this.tabModel = originData.tabModel
          this.init()
        }
      }
    },
    data() {
      return {
        // 发货单
        sendObj: {
          sendId: '',
          projectOrder: {}
        },
        // 数据字典
        dict: {
          sendStatus: {},
          stopFlag: {},
          orderStatus: {}
        },
        // tab model
        tabModel: 'detail',
        // 发货单明细列表
        sendDetailList: [],
        // 包裹单列表
        packageList: [],
        // 锁图标
        lockIcon,
        unlockIcon,
        // 锁标识
        isLock: false,
        fullLoading: false
      }
    },
    created() {
      // 获取数据字典
      getDictByGroupName('ApartOrderDTO.stopFlag').then(response => {
        Object.assign(this.dict, response.data)
      })
      getDictByGroupName('ProjectOrderDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      getDictByGroupName('ProjectSendDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.init()
    },
    methods: {
      // 复制事件
      doCopy(text, event) {
        clipboard(text, event)
      },
      // 初始化
      init() {
        this.fullLoading = true
        getSendDetail(this.sendId).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.sendObj = response.data
          this.sendDetailList = response.data.sendDetailList
          this.packageList = response.data.packageList
          this.isLock = this.sendObj.projectOrder.encryptReceiveFlag === 1
        })
      },
      // 解密事件
      doDecrypt(decryptReportType) {
        if (!this.isLock) {
          // 不再解密
          return
        }
        this.fullLoading = true
        decryptReceiveInfo(this.sendObj.projectOrder.externalOrderNo, this.sendObj.projectOrder.externalPlatformType, decryptReportType).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.isLock = false
          const data = response.data
          this.sendObj.projectOrder.customerNickname = data.customerName
          this.sendObj.projectOrder.customerPhone = data.customerPhone
          this.sendObj.projectOrder.customerFullAddress = data.consigneeDetailAddress
        })
      },
      // 返回事件
      doBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less" scoped>
  .base-info {
    width: 100%;
    line-height: 30px;
    .left {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
